<template>
    <div class="new_common_list_container">
        <ZwSearchForm row-num="3" :option="searchOption" @search="search" @reset="reset" />
        <ZwTable
            ref="tableRef"
            class="table-box"
            tab-h="initial"
            :option="tableOption"
            :fetch-params="state.searchParams"
            :fetch-api="fetch()">
            <template #headerOperate>
                <el-button @click="isopenBatch = true">导入线索</el-button>
                <el-button type="primary" @click="router.push('/customer/clubManage/commonSea/newCommonList')">
                    新建公海
                </el-button>
            </template>
        </ZwTable>
        <Dialog :app-dialog="appDialog">
            <div class="dialog_content">确定删除吗？</div>
        </Dialog>
        <AddBatch :isopen="isopenBatch" seas_id="" @close="isopenBatch = false"></AddBatch>
        <ClubDrew ref="ClubDrewRef" :rowid="rowid" :title="title" @close="close"></ClubDrew>
    </div>
</template>

<script lang="tsx">
import { defineComponent } from 'vue';
// 定义name专用script标签
// eslint-disable-next-line vue/component-definition-name-casing
export default defineComponent({ name: 'COMMON_SEA' });
</script>

<script setup lang="tsx">
import { ref, reactive, computed, provide, onMounted, onActivated, nextTick } from 'vue';
import { ElMessage, ElButton } from 'element-plus';
import ZwTable from '@/components/zw/table/Table';
import ZwSearchForm from '@/components/zw/search-form/SearchForm';
import Dialog from '@/components/Dialog.vue';
import AddBatch from '../clubSea/components/AddBatch.vue';
import ClubDrew from './components/ClubDrew.vue';
import { deepCopy } from '@/utils/helper';
import { seaList, deleteData } from '@/api/customer/clubManage/commonSea';
import router from '@/router';
import { tableH, reSize } from '@/utils/utils';
const tableRef = ref<HTMLElement | null>(null);
const isopenBatch = ref(false); //导入线索是否打开
const defaultParams = {};
const rowid = ref(null);
const ClubDrewRef = ref(null);
provide('rowid', rowid);

const requestFlag = ref<boolean>(false);
const currentParams = ref<any>(null);

const state = reactive({
    searchParams: deepCopy(defaultParams)
});
const clubopen = ref(false); //流转记录抽屉是否打开
const title = ref('');
const cancelHandel = () => {
    appDialog.visible = false;
};
const submitHandel = () => {
    deleteData({ id: rowid.value }).then((res: any) => {
        ElMessage.success('删除成功');
        state.searchParams = { ...state.searchParams };
        appDialog.visible = false;
    });
};
const appDialog = reactive({
    visible: false,
    title: '删除提醒',
    width: '500px',
    cancel: cancelHandel,
    submit: submitHandel,
    cancelText: '取消',
    submitText: '确定'
});
const tableOption = [
    {
        prop: 'name',
        label: '公海名称',
        width: 200
    },
    {
        prop: 'admin_user',
        label: '管理员',
        width: 180,
        render({ row }: any) {
            let text: any = '';
            text = row.visible_department;
            if (!row.admin_user.length) {
                return '---';
            } else if (row.admin_user.length == 1) {
                return row.admin_user[0].name;
            } else {
                return row.admin_user[0].name + '等' + row.admin_user.length + '个员工';
            }
        }
    },
    {
        label: '可见部门',
        prop: 'visible_department',
        width: 200,
        showOverflowTooltip: true,
        render({ row }: any) {
            if (!row.visible_department.length) {
                return '---';
            } else if (row.visible_department.length == 1) {
                return row.visible_department[0].name;
            } else {
                return row.visible_department[0].name + '等' + row.visible_department.length + '个部门';
            }
        }
    },
    {
        prop: 'apply_rule_desc',
        label: '分配规则',
        minWidth: 220,
        showOverflowTooltip: true
    },
    {
        prop: 'recovery_type_desc',
        label: '回收规则',
        width: 260
    },
    {
        prop: 'clue_total_nums',
        renderHeader: () => {
            /* eslint-disable */
            return (
                <div class="label_box">
                    <span>线索总数</span>
                    <el-tooltip
                        class="box-item"
                        effect="light"
                        content="公海线索总数必须清零，才可以删除"
                        placement="top">
                        <el-icon>
                            <QuestionFilled />
                        </el-icon>
                    </el-tooltip>
                </div>
            );
            /* eslint-enable */
        },
        width: 200
    },
    {
        prop: 'clue_conversion_nums',
        label: '线索转化量',
        width: 200
    },
    {
        prop: 'created_at',
        label: '创建时间',
        width: 200
    },
    {
        prop: 'created_name',
        label: '创建人',
        width: 200
    },
    {
        prop: 'operate',
        label: '操作',
        width: 295,
        fixed: 'right',
        isOperate: true,
        renderOperate({ row }: any) {
            return (
                <>
                    <ElButton
                        size="small"
                        onClick={() => {
                            router.push(
                                '/customer/clubManage/commonSea/newCommonList?id=' + row.id + '&text=查看&type=look'
                            );
                        }}>
                        查看
                    </ElButton>
                    <ElButton
                        size="small"
                        onClick={() => {
                            router.push('/customer/clubManage/commonSea/newCommonList?id=' + row.id + '&type=edit');
                        }}>
                        编辑
                    </ElButton>
                    <ElButton
                        size="small"
                        onClick={() => {
                            // clubopen.value = true
                            ClubDrewRef.value.setDrawer(true);
                            rowid.value = row.id;
                            title.value = `[${row.name}]线索转化`;
                        }}>
                        转化明细
                    </ElButton>
                    <ElButton
                        size="small"
                        v-show={row.clue_total_nums == 0 && row.user_buy_other != 1 && row.is_default !== 1}
                        onClick={() => {
                            appDialog.visible = true;
                            rowid.value = row.id;
                        }}>
                        删除
                    </ElButton>
                </>
            );
        }
    }
];
const searchOption = computed(() => {
    return [
        {
            label: '公海搜索',
            name: 'search_value',
            value: '',
            type: 'input',
            placeholder: '请输入公海名称'
        }
    ];
});
const close = () => {
    // clubopen.value = false
    ClubDrewRef.value.setDrawer(false);
    state.searchParams = { ...deepCopy(defaultParams), ...currentParams.value };
    // reset()
};
const fetch = () => {
    // 获取文件列表
    getTableH();
    return seaList;
};
//查询
const search = (v: any) => {
    currentParams.value = v;
    state.searchParams = v;
};
//清空
const reset = () => {
    state.searchParams = deepCopy(defaultParams);
    currentParams.value = null;
};
//保持页面一屏展示
const getTableH = () => {
    nextTick(() => {
        tableRef.value.getTableH();
    });
};
onMounted(() => {
    reSize(getTableH);
});

onActivated((val: any) => {
    state.searchParams = { ...deepCopy(defaultParams), ...currentParams.value };
});
</script>
<style scoped lang="scss">
.new_common_list_container {
    height: calc(100vh - 142px);
    padding: 24px;
    border: 1px solid #eaeaea;
    border-radius: 4px;
    box-sizing: border-box;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .zw-table {
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow: hidden;

        :deep(.el-table) {
            flex: 1;

            .el-table__empty-block {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
        }
    }
}

.label_box {
    display: flex;
    align-items: center;

    span {
        margin-right: 5px;
    }
}
</style>
